<template>
    <div class="body">

        <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 名称 </el-col>
                        <el-col :span="16">
                            <el-input v-model="ser.name"></el-input>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <el-button @click="set_wuliao" class="add_btn">新增半成品</el-button>
                    <el-button @click="search()" class="add_btn" icon="el-icon-search">查询</el-button>
                    <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn">重置</el-button>
                </el-col>
            </el-row>
        </div>


        <el-table :data="datalist" v-loading="loading" border>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="lining_name" label="面布">
            </el-table-column>
            <el-table-column prop="interlayer_name" label="围子">
            </el-table-column>
            <el-table-column prop="backing_name" label="底布">
            </el-table-column>
            <el-table-column prop="material1_name" label="材料1">
            </el-table-column>
            <el-table-column prop="material2_name" label="材料2">
            </el-table-column>
            <el-table-column label="操作" width="260" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="set_wuliao(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
                    <!-- <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    icon-color="red"
                    title="是否删除这条数据？"
                    @confirm="del_wuliao(scope.row)"
                  >
                    <el-button slot="reference" type="text" icon="el-icon-delete">
                      删除</el-button
                    >
                  </el-popconfirm> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                @prev-click="prev" @next-click="next" :current-page.sync="pagination.page"
                :page-size="pagination.per_page" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="title" :visible.sync="isProduct" width="60%" :close-on-click-modal="false"
            @close="close_dialogs">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <div class="ulss">
                    <div class="lis">
                        <el-form-item label="半成品名称" prop="name">
                            <el-input v-model="ruleForm.name" @input="changeValue"></el-input>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="面布">
                            <el-select filterable allow-create  v-model="ruleForm.lining" placeholder="请选择面布"
                                style="width: 100%" >
                                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="围子">
                            <el-select filterable allow-create  v-model="ruleForm.interlayer" placeholder="请选择围子"
                                style="width: 100%" >
                                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="底布">
                            <el-select filterable allow-create  v-model="ruleForm.backing" placeholder="请选择底布"
                                style="width: 100%" >
                                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="材料1">
                            <el-select filterable allow-create  v-model="ruleForm.material1" placeholder="请选择材料1"
                                style="width: 100%" >
                                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="材料2">
                            <el-select filterable allow-create  v-model="ruleForm.material2" placeholder="请选择材料2"
                                style="width: 100%" >
                                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close_dialog">取 消</el-button>
                <el-button type="primary" @click="add_ruleForm('ruleForm')">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {
    getMaterialList,
    getSelfProductList,
    createSelfProduct,
} from "@/api/product/index";
export default {
    data() {
        return {
            ser: {
                name: ''
            },
            datalist: [],
            loading: true,
            title: "",
            isProduct: false,
            pagination: {
                per_page: 100,
                page: 1,
            },
            total: 0,
            ruleForm: {
                id: "",
                name: "",
                lining: "",
                interlayer: "", //围子
                backing: "", //底布
                material1: "", //材料1
                material2: ""//材料2
            },
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }]
            },
            material_ids: [],
            productList: [],
            SpecificationList_n: [],
            MaterialList: [],
        };
    },
    mounted() {
        this.getlist();
    },
    methods: {
        search() {
            this.getlist();
        },
        searchreset() {
            this.ser = {
                name: ''
            }
            this.getlist();

        },
        changeValue(e) {
            this.$forceUpdate()
        },
        del_wuliao(row) {
            delMaterial({ id: row.id, is_del: 1 }).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功",
                    });
                    this.getlist();
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg,
                    });
                }
            });
        },
        close_dialogs() {
            this.ruleForm = {
                id: "",
                name: "",
                lining: "",
                interlayer: "", //围子
                backing: "", //底布
                material1: "", //材料1
                material2: ""//材料2
            };
        },
        close_dialog() {
            this.isProduct = false;
        },
        add_ruleForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    createSelfProduct(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.isProduct = false;
                            this.$message.success("提交成功");
                            this.getlist();
                            this.close_dialogs()
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        set_wuliao(row) {
            console.log(row);
            if (row.id) {
                // this.$set(this.ruleForm.id,row.id)
                // this.$set(this.ruleForm.name,row.name)

                this.ruleForm.id = row.id;
                this.ruleForm.name = row.name;
                this.ruleForm.lining= row.lining;
                this.ruleForm.interlayer= row.interlayer;
                this.ruleForm.backing= row.backing;
                this.ruleForm.material1= row.material1;
                this.ruleForm.material2= row.material2;
                console.log(this.ruleForm);

                this.title = "编辑半成品";
            } else {
                this.title = "新增半成品";
            }
            this.isProduct = true;
            this.get_MaterialList();
        },
        get_MaterialList() {
            getMaterialList({ per_page: 99999 }).then((res) => {
                if (res.code == 200) {
                this.MaterialList = res.data.data;
                }
            });
        },
        getlist() {
            getSelfProductList({ ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.datalist = res.data.data;
                    this.total = res.data.total;
                    this.loading = false;
                }
            });
        },
        handleSizeChange(val) {
            console.log(val);
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.getlist();
        },
        prev() {
            this.pagination.page = this.pagination.page - 1;
            this.getlist();
        },
        next() {
            console.log("ss");
            this.pagination.page = this.pagination.page + 1;
            this.getlist();
        },
        changeValue(e) {
            this.$forceUpdate();
        },
    },
};
</script>

<style scoped>
.ulss {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* .el-form-item {
      margin-bottom: 0;
    } */
</style>